<template>
	<div class="header">
		<el-row :gutter="20">
		  <el-col :span="2">
			  <div class="icon" @click="updataIsCollapse" v-if="isCollapse"><i class="el-icon-notebook-1"></i></div>
			  
			  <div class="icon" @click="updataIsCollapse" v-else><i class="el-icon-notebook-2"></i></div>
			  </el-col>
		  <el-col :span="19"><div class="title">婚 奢 汇 测 试 平 台</div></el-col>
		  <el-col :span="3">
			  <div class="user-info">
				  <el-row>
					  <!-- 用户头像 -->
				    <el-col :span="7">
						<img style='position: relative;top:15px' width="40px" height="40px" src="../assets/logo.png"></img></el-col>
				    <!-- 下拉菜单 -->
					<el-col :span="17">
						<el-dropdown @command="handleCommand">
						  <span class="el-dropdown-link">
						    {{username}}<i class="el-icon-arrow-down el-icon--right"></i>
						  </span>
						  <el-dropdown-menu slot="dropdown">
						    <el-dropdown-item command='selectPro'>切换项目</el-dropdown-item>
						    <el-dropdown-item command='logout'>退出登录</el-dropdown-item>
						  </el-dropdown-menu>
						</el-dropdown>
					</el-col>
				  </el-row>
			  </div>
		  </el-col>
		</el-row>
	</div>
	
</template>

<script>
	import {mapMutations, mapState} from 'vuex'
	export default{
		
		data(){
			return{
				username: ""
			}
		},
		methods:{
			handleCommand(cmd){
				// 退出登录
				if(cmd==='logout'){
					// 清空sessionStorage中的token
					window.sessionStorage.removeItem('token');
					// 清空token之后，重定向到登录页面
					this.$router.push('/login')
				}else if(cmd === 'selectPro'){
					//  跳转到切换项目的页面
					this.$router.push('/allProject')
				}
			},
			...mapMutations(['updataIsCollapse'])
		},
		computed:{
			...mapState(['isCollapse'])
		},
		mounted(){
			this.username = window.sessionStorage.getItem("username")
		}
		
	}
</script>

<style scoped>
	.header{
		background: #000000;
		height: 70px;
		color: #FFFFFF;
		
	}
	.icon{
		font: normal 28px/70px "microsoft yahei";
		text-align: center;
		
	}
	.title{
		font: normal 28px/70px "microsoft yahei";
		text-align: center;
		color: #FFFFFF;
	}
	.user-info{
		height: 70px;
	}
	.el-row{
		height: 70px;
		line-height: 70px;
	}
	.el-dropdown-link{
		cursor: pointer;
		color: #FFFFFF;
		font-size: 14px;
	}
	
</style>
